<template>
  <div id="all">
    <div id="parent">
      <commonHead :child-name="childName" father-name="运动健康"></commonHead>
    </div>
    <div id="body">
      <div id="bar">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="走步" name="first">
            <walk></walk>
          </el-tab-pane>
          <el-tab-pane label="体重" name="second">
            <weight></weight>
          </el-tab-pane>
          <el-tab-pane label="睡眠" name="third">
            <sleep></sleep>
          </el-tab-pane>
          <el-tab-pane label="器械查询" name="fourth">
            <device></device>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
  import walk from '../sports/query/Walk';
  import weight from '../sports/query/Weight';
  import commonHead from "../system/common/commonHead";
  import sleep from '../sports/query/Sleep';
  import device from '../sports/query/Device'

  export default {
    data() {
      return {
        activeName: 'first',
        childName:'数据查询',
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    components: {
      walk,commonHead,weight,sleep,device
    }
  };
</script>
<style scoped>
  #parent{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .body{
    background-color: #F0F2F5;
    padding-top: 15px;
    box-sizing: border-box;
  }
</style>
